<template>
  <div class="task-con" :style="{ height: userInfo.jumpFlag != 'erp' ? ' calc(100vh - @menuHeight)' : '100vh' }">
    <div class="top-tab">
      <a-tabs v-model:active-key="curPage" @change="tabChange" size="mini">
        <a-tab-pane v-for="item in tabList" :key="item.key">
          <template #title>
            <span>{{ item.label }}</span>
            <span v-if="item.num > 0">({{ item.num ? item.num : '0' }})</span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="table-bottom table-gl-w">
      <div class="search-w">
        <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
      </div>
      <div class="table-gl-con">
        <TableWrap style="flex: 1" @refresh="getList">
          <template #headerLeft>
            <a-space>
              <a-button class="gray-outline" v-if="curPage == 'NOT_START'" @click="start('mul')">开启子任务</a-button>
              <a-button class="gray-outline" v-if="curPage == 'NOT_START'" @click="remove">移交任务</a-button>
              <a-button class="gray-outline" v-if="curPage == 'STARTED'" @click="finish('mul')">子任务完成</a-button>
            </a-space>
          </template>
          <template #headerRight>
            <sortKey :list="sortKeyList" @save="getListBySortKey" />
          </template>
          <template #tableBody>
            <a-table size="mini" row-class="common-row" :scrollbar="false" :span-method="spanMethodAll" :expandable="expandable" :bordered="{ headerCell: true, wrapper: true }" v-model:selected-keys="ids" row-key="id" class="table-singe-line show-border-tabl" @sorter-change="sortChange" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
              <template #columns>
                <a-table-column class="my-table-column" title="选择" :width="88" fixed="left">
                  <template #title>
                    <a-checkbox @change="selAll" v-model="selAllVal"></a-checkbox>
                  </template>

                  <template #cell="{ record }">
                    <div>
                      <a-checkbox-group v-model="record.selNodeCodeList">
                        <div class="con flex-c" style="width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #e5e6eb" v-for="(item, index) of record.taskRequire ? record.taskRequire.taskNodeList : []" :key="index">
                          <div style="width: 80px">
                            <a-checkbox :value="item.nodeType">{{ item.customIndex }}</a-checkbox>
                          </div>
                          <div style="width: 160px">
                            <div class="flex-c task-node cursor" @click="viewDetial(record)">
                              <div class="highlight">{{ nodeMap[item.nodeType] }}</div>
                              <!-- <div class="ml5 edit-icon"><icon-tags style="font-size: 16px" class="highlight cursor" /></div> -->
                            </div>
                          </div>
                          <div style="width: 160px">{{ $extract(item, 'executer.name') }}</div>
                          <div style="width: 72px; height: 40px; border-right: 1px solid #e5e6eb">
                            <a-popover>
                              <icon-poweroff class="highlight cursor" style="font-size: 18px; margin-left: 25px" v-if="item.firstNode && curPage == 'NOT_START'" @click="start('single', item, record)" />
                              <template #content>
                                <p>开启子任务</p>
                              </template>
                            </a-popover>

                            <a-popover>
                              <icon-poweroff class="highlight cursor" style="font-size: 18px; margin-left: 25px" v-if="curPage == 'STARTED'" @click="finish('single', item, record)" />
                              <template #content>
                                <p>完成子任务</p>
                              </template>
                            </a-popover>

                            <!-- <a-button type="text" v-if="item.firstNode && curPage == 'NOT_START'"> 开启子任务 </a-button>
                          <a-button v-if="curPage == 'STARTED'" type="text">完成子任务</a-button> -->
                          </div>
                        </div>
                      </a-checkbox-group>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column title="任务子任务" #cell="{ record }" :width="160" fixed="left"> </a-table-column>
                <a-table-column title="子任务执行人" #cell="{ record }" :width="160" fixed="left"> </a-table-column>
                <a-table-column :width="80" fixed="left">
                  <template #title>
                    <a-popover content="仅任务的第一个子任务需要手动开启，其他子任务根据上一个子任务完成自动开启下一个子任务。第一个子任务开启之后任务状态进入到执行中。">
                      <p>
                        <span>操作</span>
                        <icon-question-circle />
                      </p>
                    </a-popover>
                  </template>
                </a-table-column>

                <a-table-column title="图片" #cell="{ record }" :width="60" fixed="left">
                  <ImgPopover :src="imgUrl(record)">
                    <template #con>
                      <a-image :preview="false" width="40" height="40" fit="contain" :src="imgUrl(record)" />
                    </template>
                  </ImgPopover>
                </a-table-column>
                <a-table-column title="SKU" #cell="{ record }" :width="150" fixed="left" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="product.sku">
                  <TextLimit v-if="$extract(record, 'product.sku')" @click="showSkuDetail(record)" class="highlight cursor" position="top" :rows="1" :val="$extract(record, 'product.sku') || '--'" />
                  <div v-else>--</div>
                </a-table-column>
                <a-table-column title="采购下单" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="product.gmtPurchase"> {{ $setTime($extract(record, 'product.gmtPurchase'), 'YYYY-MM-DD HH:mm') }} </a-table-column>
                <a-table-column title="采购入库" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="product.gmtPurchaseWarehouse"> {{ $setTime($extract(record, 'product.gmtPurchaseWarehouse'), 'YYYY-MM-DD HH:mm') }} </a-table-column>
                <a-table-column title="货件发货" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="product.gmtShipmentShipped"> {{ $setTime($extract(record, 'product.gmtShipmentShipped'), 'YYYY-MM-DD HH:mm') }} </a-table-column>
                <a-table-column title="货件入库" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="product.gmtShippmentWarehouse"> {{ $setTime($extract(record, 'product.gmtShippmentWarehouse'), 'YYYY-MM-DD HH:mm') }} </a-table-column>
                <!-- <a-table-column title="任务类型" #cell="{ record }" :width="80">{{ typeMap[record.type] }} </a-table-column> -->
                <a-table-column title="服务内容" #cell="{ record }" :width="100" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="taskRequire.serContent">
                  <TextLimit :val="$extract(record, 'taskRequire.serContent')" :rows="1" position="top" />
                </a-table-column>
                <!-- <a-table-column title="任务费用" #cell="{ record }" :width="80">
                  <div style="color: red">￥{{ $extract(record, 'amtbCost') }}</div>
                </a-table-column> -->

                <a-table-column title="甲方" #cell="{ record }" :width="100"> {{ $extract(record, 'deductionInfo.consumerAccountUserName') }} </a-table-column>
                <a-table-column title="雇主" #cell="{ record }" :width="100" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="employer.name">
                  <div>{{ $extract(record, 'employer.name') || '--' }}</div>
                  <div class="common-text">{{ $extract(record, 'employer.deptName') || '--' }}</div>
                </a-table-column>
                <a-table-column title="类型/ID" #cell="{ record }" :width="160">
                  <div>{{ typeMap[record.type] }}</div>
                  <a-space>
                    <div class="highlight cursor" @click="viewDetial(record)">{{ record.code }}</div>
                    <div v-if="$extract(record.taskRequire, 'isSample')">
                      <span style="color: #979797" class="icon icon-yangpin"></span>
                    </div>
                  </a-space>
                </a-table-column>
                <a-table-column title="状态" #cell="{ record }" :width="130">
                  {{ tabKeyMap[record.status] }}
                </a-table-column>
                <a-table-column title="预计交付日期" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'], sorter: true }" data-index="gmtPlanDelivery">
                  <div>{{ $setTime(record.gmtPlanDelivery, 'YYYY-MM-DD') }}</div>
                  <div v-if="record.gmtPlanDelivery">
                    <div style="color: red" v-if="!toCheckDay(record.gmtPlanDelivery).type">超时{{ toCheckDay(record.gmtPlanDelivery).day }}</div>
                    <div class="highlight" v-else>剩余{{ toCheckDay(record.gmtPlanDelivery).day }}</div>
                  </div>
                </a-table-column>

                <a-table-column title="留言" #cell="{ record }" :width="80">
                  <a-space>
                    <div>{{ getNum(record.leaveMsgList) }}</div>
                    <div>
                      <div v-if="record.hasPartaNewLeaveMsg == null || record.hasPartaNewLeaveMsg == false">
                        <icon-message @click="showMsgModal(record)" class="cursor" :style="{ fontSize: '18px' }" />
                      </div>
                      <div v-else>
                        <a-badge :count="1" dot :offset="[2, -2]">
                          <icon-message @click="showMsgModal(record)" class="cursor" :style="{ color: '#f59a23', fontSize: '18px', verticalAlign: '-3px' }" />
                        </a-badge>
                      </div>
                    </div>
                  </a-space>
                </a-table-column>
              </template>
              <template #expand-row="{ record }">
                {{ record }}
              </template>
            </a-table>
          </template>
        </TableWrap>
        <div class="pagination-footer" v-if="!curPage">
          <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
        </div>
      </div>
    </div>
  </div>
  <msglist v-if="showMsgListModal" v-model="showMsgListModal" :info="taskDetailInfo" @save="getList" />
  <!-- 详情 -->
  <viewTaskDetail v-if="viewTaskDetailModal" v-model="viewTaskDetailModal" isTeamtype="isTeam" :info="taskDetailInfo" @save="getList" />

  <skuDetail ref="SKU" :info="taskDetailInfo" />
  <!-- 移交任务 -->
  <removeTask v-if="removeTaskModal" v-model="removeTaskModal" :list="selNodeList" @save="getList" />

  <a-modal :width="600" title="开启子任务" v-model:visible="showStartVisible" @ok="handleOkStart" @cancel="showStartVisible = false">
    <div>请再次确认是否需要开启该任务，开启之后任务进入到执行中状态</div>
    <div class="common-text mt5">注意：仅第一个子任务需要手动开启，之后的子任务跟着上一个子任务完成自动开启。</div>
  </a-modal>
  <a-modal :width="600" title="完成子任务" v-model:visible="showEndVisible" @ok="handleOkEnd" @cancel="showEndVisible = false">
    <div>请再次确认该任务已完成？</div>
    <div class="common-text mt5">注意：完成之后将自动开启下一个子任务，如果是最后一个子任务完成之后，系统将在24小时之后自动提交验收。</div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, onMounted, h } from 'vue'
  import { findMyTaskPagev2, enableTaskNodes, finishTaskNodes, countMyTaskNodeStatus } from '@/api/task'
  import { Message, Modal } from '@arco-design/web-vue'
  import useUserStore from '@/store/modules/user'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import msglist from './components/msgList.vue'
  import viewTaskDetail from './components/viewDetail/viewdetailIndex.vue'
  import removeTask from './components/removeTask.vue'
  import sortKey from './components/sortKey.vue'
  import skuDetail from './components/skuDetail.vue'
  import _ from 'lodash-es'
  import { nodeMap } from './components/setting/map'

  const sortKeyList = [
    { name: 'SKU', key: 'product.sku' },
    { name: '采购下单', key: 'product.gmtPurchase' },
    { name: '采购入库', key: 'product.gmtPurchaseWarehouse' },
    { name: '货件发货', key: 'product.gmtShipmentShipped' },
    { name: '货件入库', key: 'product.gmtShippmentWarehouse' },
    { name: '服务内容', key: 'taskRequire.serContent' },
    // { name: '任务费用', key: 'amtbCost' },
    { name: '雇主', key: 'employer.name' },
    // { name: '预计交付日期', key: 'gmtPlanDelivery' },
    // { name: '发布时间', key: 'gmtPublish' },
    // { name: '完成时间', key: 'gmtFinish' },
  ]

  const tabKeyMap = {
    WAIT_PUBLISH: '待发布',
    WAIT_ACCEPT: '待接单',
    SENDING_SAMPLE: '送样中',
    WAIT_SCHEDULE: '待执行',
    EXECUTING: '执行中',
    WAIT_VERIFY: '待验收',
    FINISHED: '已完成',
    NEGOTIATE_TERMINATED: '协商终止',
    TERMINATED: '已终止',
  }
  const expandable: any = ref({
    title: '',
    defaultExpandAllRows: true,
    expandedRowKeys: [],
    width: 10,
  })
  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    FIX_PICTURE: '以图修图',
    SHOOT_VIDEO: '拍摄视频',
    POSTER_SHOP_DESIGN: '海报设计',
    CHANGE_DIAMOND_COLOR: '换钻调色',
    HAND_DRAWN_DESIGN: '手绘设计',
  }
  const SKU = ref()
  let curPage = ref('NOT_START')
  let tabList = ref([
    { label: '未开启', num: '0', key: 'NOT_START' },
    { label: '已开启', num: '0', key: 'STARTED' },
    { label: '已完成', num: '0', key: 'FINISHED' },
    { label: '全部任务', num: '0', key: '' },
  ])
  let searchValue: any = ref({})
  let tableList = ref([{}])
  let loading = ref(false)
  let selAllVal = ref(false)
  let showEndVisible = ref(false)
  let showStartVisible = ref(false)
  let removeTaskModal = ref(false)
  let showMsgListModal = ref(false)
  let viewTaskDetailModal = ref(false)
  let ids: any = ref([])
  let selNodeList = ref([])
  let sampleStatus: any = ref('')
  let taskDetailInfo: any = ref({})
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  let userInfo = useUserStore()
  const filterItem: any = ref([
    {
      type: 'input_keyword_type',
      key: 'product.sku',
      keyItems: [
        { label: '产品SKU', value: 'product.sku' },
        { label: '任务ID', value: 'code' },
        { label: '服务内容', value: 'serContentList' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: '产品SKU',
      width: 260,
      isMultiple: true,
    },
    {
      type: 'input_keyword',
      key: 'employerName',
      keyItems: [
        { label: '甲方', value: 'employerName' },
        { label: '雇主', value: 'createUname' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: '甲方',
      width: 160,
    },
    {
      key: 'taskType',
      label: '任务类型',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '新品套图', value: 'NEW_PRODUCT_PICTURE' },
        { label: '以图修图', value: 'FIX_PICTURE' },
        { label: '拍摄视频', value: 'SHOOT_VIDEO' },
        { label: '海报设计', value: 'POSTER_SHOP_DESIGN' },
        { label: '换钻调色', value: 'CHANGE_DIAMOND_COLOR' },
        { label: '手绘设计', value: 'HAND_DRAWN_DESIGN' },
      ],
      attrs: {
        'allow-clear': true,
      },
    },

    {
      type: 'keyword_date_range_custom',
      key: 'gmtPlanDelivery',
      keyItems: [{ label: '预计交付日期', value: 'gmtPlanDelivery' }],
      keyWidth: '110',
      value: ref(),
      label: '预计交付日期',
      width: 200,
    },

    {
      type: 'keyword_date_range_custom',
      key: 'product.gmtPurchase',
      keyItems: [
        { label: '采购下单时间', value: 'product.gmtPurchase' },
        { label: '采购入库时间', value: 'product.gmtPurchaseWarehouse' },
        { label: '货件发货时间', value: 'product.gmtShipmentShipped' },
        { label: '货件入库时间', value: 'product.gmtShippmentWarehouse' },
      ],
      keyWidth: '110',
      label: '采购下单时间',
      value: ref(),
      width: 200,
    },
  ])

  const searchByVal = (info: any) => {
    searchValue.value = _.cloneDeep(info)
    if (searchValue.value.startDate) {
      searchValue.value.startDate = new Date(`${searchValue.value.startDate} 00:00:00`).valueOf()
      searchValue.value.endDate = new Date(`${searchValue.value.endDate} 23:59:59`).valueOf()
    }
    if (searchValue.value.codeList) {
      searchValue.value.codeList = searchValue.value.codeList.split(',')
    } else {
      searchValue.value.codeList = []
    }
    getList()
  }
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }

  const getList = async () => {
    let params = {
      ...searchValue.value,
      taskNodeStatus: curPage.value,
      pageNum: pageNation.value.pageNum,
    }

    if (curPage.value) {
      params.pageSize = 999999
    } else {
      params.pageSize = pageNation.value.pageSize
    }

    loading.value = true
    const res: any = await findMyTaskPagev2(params)
    if (res) {
      selNodeList.value = []
      let arr = res?.data?.records || []
      tableList.value = arr.map((e: any) => {
        e.selNodeCodeList = []
        return e
      })
      setNodeIndex()
      pageNation.value.total = res?.data?.total
    }
    ids.value = []
    loading.value = false
  }

  const setNodeIndex = () => {
    let preBigNum = 0
    tableList.value.forEach((e: any) => {
      e.taskRequire.taskNodeList.forEach((e: any) => {
        preBigNum++
        e.customIndex = preBigNum
      })
    })
  }

  const toCheckDay = (time: any) => {
    let date = new Date(time).valueOf() + 24 * 60 * 60 * 1000
    let newDate = new Date().valueOf()
    let timeStr = 0
    if (date > newDate) {
      timeStr = date - newDate
    } else {
      timeStr = newDate - date
    }
    const formatTimeFromTimestamp = (timestamp: number) => {
      let text = ''
      const days = Math.floor(timestamp / (60 * 60 * 24 * 1000))
      const hours = Math.floor((timestamp % (60 * 60 * 24 * 1000)) / (60 * 60 * 1000))
      text = days > 0 ? `${days}天${hours}小时` : `${Math.abs(hours)}小时`
      return text
    }
    if (date - newDate < 0) {
      return {
        type: false,
        day: formatTimeFromTimestamp(timeStr),
      }
    } else {
      return {
        type: true,
        day: formatTimeFromTimestamp(timeStr),
      }
    }
  }

  const getNum = (list: any) => {
    if (list && list instanceof Array) {
      return list.length > 99 ? '99+' : list.length
    } else {
      return '0'
    }
  }

  const viewDetial = (info: any) => {
    taskDetailInfo.value = info
    viewTaskDetailModal.value = true
  }

  const tabChange = () => {
    pageNation.value.pageNum = 1
    selAllVal.value = false
    getList()
  }

  const showMsgModal = (info: any) => {
    taskDetailInfo.value = info
    showMsgListModal.value = true
  }

  const imgUrl = (data: any) => {
    let arr = data?.product?.productPicList || []
    return arr.length > 0 ? arr[0].url : ''
  }

  const showSkuDetail = (info: any) => {
    taskDetailInfo.value = info
    SKU.value.visible = true
  }

  const start = async (type: String, item?: any, data?: any) => {
    let paramsArr: any = []
    if (type == 'mul') {
      tableList.value.forEach((e: any) => {
        let arr = e.selNodeCodeList || []
        arr.forEach((el: any) => {
          let obj = {
            taskId: e.id,
            taskNodeType: el,
          }
          paramsArr.push(obj)
        })
      })
      if (paramsArr.length == 0) return Message.error('请选择要开启的任务子任务')
    } else {
      let obj = {
        taskId: data.id,
        taskNodeType: item.nodeType,
      }
      paramsArr.push(obj)
    }
    selNodeList.value = paramsArr
    showStartVisible.value = true

    // Modal.info({
    //   title: '提示',
    //   content: () => h(renderStr),
    //   titleAlign: 'start',
    //   cancelText: '取消',
    //   hideCancel: false,
    //   onOk: async () => {
    //     const res: any = await enableTaskNodes(paramsArr)
    //     if (res) {
    //       Message.success('任务子任务开启成功')
    //       pageNation.value.pageNum = 1
    //       getList()
    //     }
    //   },
    // })
  }
  const finish = async (type: String, item?: any, data?: any) => {
    let paramsArr: any = []
    if (type == 'mul') {
      tableList.value.forEach((e: any) => {
        let arr = e.selNodeCodeList || []
        arr.forEach((el: any) => {
          let obj = {
            taskId: e.id,
            taskNodeType: el,
          }
          paramsArr.push(obj)
        })
      })
      if (paramsArr.length == 0) return Message.error('请选择要结束的任务子任务')
    } else {
      let obj = {
        taskId: data.id,
        taskNodeType: item.nodeType,
      }
      paramsArr.push(obj)
    }
    selNodeList.value = paramsArr
    showEndVisible.value = true

    // Modal.info({
    //   title: '提示',
    //   content: '请再次确认是否要结束任务子任务',
    //   titleAlign: 'start',
    //   cancelText: '取消',
    //   hideCancel: false,
    //   onOk: async () => {
    //     const res: any = await finishTaskNodes(paramsArr)
    //     if (res) {
    //       Message.success('任务子任务结束')
    //       pageNation.value.pageNum = 1
    //       getList()
    //     }
    //   },
    // })
  }

  const handleOkStart = async () => {
    const res: any = await enableTaskNodes(selNodeList.value)
    if (res) {
      Message.success('子任务开启成功')
      pageNation.value.pageNum = 1
      getList()
    }
  }
  const handleOkEnd = async () => {
    const res: any = await finishTaskNodes(selNodeList.value)
    if (res) {
      Message.success('子任务结束')
      pageNation.value.pageNum = 1
      getList()
    }
  }

  const remove = () => {
    tableList.value.forEach((e: any) => {
      let arr = e.selNodeCodeList || []
      arr.forEach((el: any) => {
        let obj = {
          taskId: e.id,
          taskNodeType: el,
        }
        selNodeList.value.push(obj)
      })
    })
    if (selNodeList.value.length == 0) return Message.error('请选择要移交的任务子任务')
    removeTaskModal.value = true
  }

  const selAll = () => {
    tableList.value.forEach((e: any) => {
      let arr = e.taskRequire?.taskNodeList || []
      if (selAllVal.value) {
        e.selNodeCodeList = arr.map((el: any) => {
          return el.nodeType
        })
      } else {
        e.selNodeCodeList = []
      }
    })
  }

  function spanMethodAll(option: any) {
    let { column } = option
    if (column.title == '选择') {
      return { rowspan: 1, colspan: 4 }
    }
  }

  const getTaskNodeNum = async () => {
    const res: any = await countMyTaskNodeStatus({})
    tabList.value[0].num = res?.data?.notStart
    tabList.value[1].num = res?.data?.started
    tabList.value[2].num = res?.data?.finished
  }

  const getListBySortKey = (list: any) => {
    searchValue.value.customSortList = list
    if (list[0]) getList()
  }

  onMounted(() => {
    getList()
    getTaskNodeNum()
  })
</script>

<style lang="less" scoped>
  .task-node {
    .edit-icon {
      display: none;
    }
    &:hover {
      .edit-icon {
        display: block;
      }
    }
  }

  .con {
    &:last-child {
      border-bottom: none !important;
    }
  }

  :deep(.arco-table-td) {
    background-color: var(--color-fill-1);
  }
  :deep(.arco-table-tr-expand) {
    .arco-table-cell {
      padding: 0;
    }
    .arco-table {
      margin: 0 !important;
      .arco-table-td {
        border-bottom: 1px solid var(--color-neutral-3);
      }
    }
    background-color: #fff !important;
  }
  :deep(.child-row) {
    .arco-table-cell {
      padding: 2px 8px;
    }
  }
  :deep(.arco-table-tr-expand .arco-table-td) {
    background-color: #fff !important;
    border-bottom: none;
  }
  :deep(.arco-table-tr-expand tr:hover .arco-table-td) {
    background-color: var(--color-fill-1) !important;
  }
  :deep(.arco-table-expand .arco-table-cell) {
    display: none;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }

  :deep(.arco-radio-group-button) {
    padding: 0;
    .arco-radio-button {
      margin: 0;
      background-color: #fff;
      line-height: 30px;
      border: 1px solid var(--color-border);
      &:first-child {
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-radius: 0 5px 5px 0;
      }
    }
    .arco-radio-checked {
      border-color: rgb(var(--primary-6));
    }
  }

  .common-row {
    background: red;
  }

  .task-con {
    // height: calc(100vh - @menuHeight);
    .top-tab {
      background-color: white;
    }
    .table-bottom {
      height: calc(100vh - @menuAndTabHeight);
    }
  }

  .level-btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
  }

  .level-1 {
    background-color: #ffff80;
    color: black;
  }
  .level-2 {
    background-color: #a30014;
    color: white;
  }
  .level-3 {
    background-color: #d9001b;
    color: white;
  }
  .level-4 {
    background-color: #ec808d;
    color: white;
  }
</style>
